<template>
    <div class="main">
        <!-- <div class="icon-zhuye iconfont"></div> -->
        <!-- 二级路由插座 -->
        <router-view></router-view>
            <van-tabbar v-model="active" active-color="#ee0a24" route>
                <van-tabbar-item v-for="(item, index) in tabbarData" :to="{name:item.name}" :key="index" >
                    <!-- @click="clicktotal(item.name)" -->
                    <span>{{ item.title }}</span>
                    <template #icon="props">
                        <!-- <van-icon :name="props.active ? item.active:item.inactive"/> -->
                        <div class="iconfont" :class="props.active?item.active:item.inactive"></div>
                    </template>
                </van-tabbar-item>
            </van-tabbar>
    </div>
</template>

<script>
export default {
    name: "Main",

    data() {
        return {
            active: 0,

            tabbarData: [
                {
                    title: "首页",
                    // active:'wap-home',
                    active:'icon-zhuye',
                    inactive:"icon-zhuye1",
                    // inactive:'wap-home-o',
                    name: "Shouye",
                },
                {
                    title: "点餐",
                    active: 'icon-shipinyinliao',
                    inactive: 'icon-yinliao',
                    name: "Eat",
                },
                {
                    title: "订单",
                    active: 'icon-complete-fill',
                    inactive: 'icon-dingdan',
                    name: "Order",
                },
                {
                    title: "我的",
                    active: 'icon-wode1',
                    inactive: 'icon-wode',
                    name: "My",
                },
            ],
        };
    },

    methods: {
        clicktotal(routerName) {
            this.$router
                .push({
                    name: routerName,
                })
                .catch((err) => {
                    return err;
                });
        },
    },
};
</script>

<style lang="less" scoped>
.main{
    width: 100%;
    height: 50px;
    // padding-bottom: 50px;
}
.van-tabbar {
    font-size: 13px;
    color: #686969;
    display: flex;
    .van-tabbar-item {
        margin-bottom: 10px;
        border-top: 1px solid #c7d4d4;
        padding-top: 10px;
        
    }
   

    

    
}
</style>
